<template>

  <div class="report-container">
    <!-- <title></title> -->
    <div class="report-header">
      <img class="img" src="../../assets/image/a.jpg" style="border: 0px;" />
    </div>


    <el-form :model="form" ref="form" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="电话:" prop="tel">
            <el-input v-model.number="form.tel" placeholder="请输入电话"  oninput="if(value.length>11)value=value.slice(0,11)"
            onkeyup="this.value = this.value.replace(/[^\d]/g,'');" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="年龄" prop="age">
            <el-input type="number"  v-model.number="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="接种单位:" :span="24" prop="unit">
            <div>
              <el-select v-model="form.unit">
                <el-option v-for="(item,index) in unit" :value="item.name+item.address+item.tel"></el-option>

              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="是否带家人一起接种(9-14岁女孩仅需接种两剂):" :span="24" prop="is_home">
            <div>
              <el-select v-model="form.is_home" >
                <el-option value="是"></el-option>
                <el-option value="否"></el-option>

              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="是否参加宫颈癌筛查(35-64岁女性免费参加):" :span="24" prop="is_join">
            <div>
              <el-select v-model="form.is_join" >
                <el-option value="是"></el-option>
                <el-option value="否"></el-option>

              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学校(非学生可不填):" prop="school">
            <el-input v-model="form.school" placeholder="非学生可不填"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="form.remark" placeholder="备注:"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">提交</el-button>
    </el-form>

  </div>
</template>

<script>
  import {
    getUnit,
    saveuser
  } from "@/api/user/user.js";
  import getPageTitle from "@/utils/get-page-title"
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        console.log('value',value);
        var phoneReg = /^1[3456789]\d{9}$/
        if (!phoneReg.test(value)) {
          return callback(new Error('请输入正确手机号'));
        }
      };
      return {
        checked: true,
        form: {
          name: '',
          tel: "",
          age: '',
          unit: '',
          school: "",
          remark: "",
          is_home:"否",
          is_join:"否"

        },
        rules: {
          name: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }, ],
          tel: [
            {
            required: true,
            message: '必填项',
            trigger: 'blur'
          },
          {validator: validatePass2, message: '手机号格式不正确',
            trigger: 'blur'}
          ],
          age: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          unit: [{
            required: true,
            message: '',
            trigger: 'blur'
          }],
          school: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],
          remark: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],
          is_home: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],
          is_join: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],

        },
        unit: [],
        editing: true,
        type:0
      }
    },
    created() {

      console.log("type:",this.$route.query.id);
      if(this.$route.query.id !=null){
        this.type = this.$route.query.id
        if(this.type ==1){
           document.title=getPageTitle("荆州市二价宫颈疫苗预约")
        }
        this.getunit(this.type);
      }else{
        document.title=getPageTitle("十堰市二价宫颈疫苗预约")
        this.getunit()
      }
    },
    methods: {
      getunit(type =0) {
        var that = this
        let data = {
          field: "type",
          op: "=",
          value: type
        }
        getUnit(data).then(res => {
          console.log('getUnit:', res);
          that.unit = res
        })
      },
      submitForm() {
        let that = this;
        var phoneReg = /^1[3456789]\d{9}$/
        if (!phoneReg.test(that.form.tel)) {
            that.$message({
              message: "手机号不正确",
              type: "error",
            });
            return false
        }
        if (that.form.name != '' && that.form.unit != '' && that.form.age != '') {
          let data = {
            name: that.form.name,
            age: that.form.age,
            unit: that.form.unit,
            tel: that.form.tel,
            school: that.form.school,
            remark: that.form.remark,
            is_home:that.form.is_home,
            is_join:that.form.is_join,
            type:that.type
          }
          console.log('保存消息：', data);
          saveuser(data).then(res => {
            console.log('保存成功', res.id);

            if (res == 1) {
              that.$message({
                message: "恭喜您成功预约宫颈癌疫苗，请尽快前往接种单位接种",
                type: "success",
              });
              that.resetForm("form")
            } else {
              that.$message({
                message: "手机号不能重复",
                type: "error",
              });
            }

          })

        } else {
          that.$message({
            message: "不能为空！",
            type: "error",
          });
          this.vloading = false;
        }
      },
      resetForm(form) {
        this.$refs[form].resetFields();
      },
    }
  }
</script>

<style scoped>
  .report-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #ddd;
  }

  .button-group {
    margin-top: 30px;
    text-align: right;
  }

  .report-header {
    display: flex;
    align-items: center;
  }

  .name,
  .age {
    font-size: 24px;
    font-weight: bold;
  }

  .img {
    width: 100%;
  }

  .edit-button {
    padding: 0;
    font-size: 16px;
  }

  .report-content {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }
</style>
